<template>
  <div>
    <div class="hbox">
      <div class="td-dec-header">
        <div class="h-leftimg">
          <img :src="arr.posterUrl">
        </div>
        <div class="h-righttext">
          <img src="images/alltickets.png">
          <div class="titleTop">{{arr.name}}</div>
          <div class="titleBtm">{{arr.priceRange}}元</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import getLink from '@/api/getLink.js'
export default {
  data() {
    return {
      arr: []
    }
  },
  created() {
    getLink('/show/today').then(res => {
      this.arr = res.data.find(v => v.categoryId == this.$route.query.todaysale)
    })
  }
}
</script>
<style scoped>
.hbox {
  height: 3.8rem;
  background-image: linear-gradient(to right, #2a294a, #44435f, #2a294a);
}
.td-dec-header {
  overflow: hidden;
  width: 90%;
  margin: auto;
  height: 3.8rem;
  background-image: linear-gradient(to right, #2a294a, #44435f, #2a294a);
  display: flex;
  align-items: center;
}
.h-leftimg {
  border-radius: 0.1rem;
}
.h-leftimg img {
  width: 2.2rem;
}
.h-righttext {
  width: 5rem;
  height: 80%;
  padding-left: 0.3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* background-color: aqua; */
  color: #ffffff;
}
.h-righttext img {
  width: 1.42rem;
}
.h-righttext .titleTop {
  font-size: 0.32rem;
  margin-bottom: 1rem;
}
.h-righttext .titleBtm {
  font-size: 0.28rem;
  margin-bottom: 0.1rem;
}
</style>